<html>
  <head>
    <title>优化建议</title>
  </head>
  <body>
    <script>
      /*
                 二、优化建议

                          1、避免使用大图

                                  页面中若大量使用大图资源，会造成页面切换的卡顿，导致系统内存升高，甚至白屏崩溃。

                              尤其是不要把多张大图缩小后显示在一个屏幕内，比如上传图片前选择了数张几M体积的照片，然后缩小在一个屏幕中展示多张几M的大图，非常容易白屏崩溃。


                              对大体积的二进制文件进行 base64,也非常耗费资源。


                          2、优化数据更新

                                  在 uni-app 中，定义在 data里的数据每次变化时都会通知视图层重新渲染页面。所以如果不是视图所需要的变量，

                              可以不定义在data中，可在外部定义变量或直接挂载在 vue实例上，以避免造成资源浪费。


                          3、长列表

                                ①、长列表中如果每个item有一个点赞按钮，电机后点赞数字+1，此时点赞组件必须使一个单独引用的组件，才能做到差量数据更新。

                                   否则会造成这个列表数据重载。

                                ②、长列表中每个item并不一定需要做成组件，取决于你的业务中是否需要差量更新某一样item的数据，如果没有此类需求则不应该引入大量组件。
                                   
                                   （点击 item 后背景变色，输入css调整，没有更新data数据和渲染，不涉及这个问题）

                                ③、单个组件中存在大量数据时(比如长列表)，在App和小程序端数据更新时会消耗较多事件，建议使用组件对数据进行分页，将变更限制更小范围。

                                    可以参考： 长列表优化示例： https://ext.dcloud.net.cn/plugin?id=2863#detail

                                ④、app端 nvue 的长列表应该使用 list 组件，有自动的渲染回收机制。
                                
                                      vue页面使用页面滚动的性能，好于使用scroll-view 的区域滚动。  uni_ui 封装了 uList组件，
                                      
                                      在 app-nvue下使用list组件，在其他环境使用页面滚动，强烈推荐开发者使用，避免自己写得不好影响性能。

                                ⑤、如需要左右滑动的长列表，请在HBiulderX 新建 uni-app项目选欣慰模板，那是一个标杆实现。自己用 swiper 和 scroll-view做很容易引发性能问题。


                          4、减少一次性渲染的节点数量

                                  页面初始化时，逻辑层如果一次性想视图层传递很大的数据，使视图层一次性渲染大量节点，可能造成通讯变慢、页面切换卡顿，所以建议以局部更新页面的方式渲染页面。

                                  eg:   服务端返回100条数据，可进行分批下载50,500ms后进行下一次加载。


                          5、减少组件数量、减少节点嵌套层级
                              
                                  深层嵌套的节点在页面初始化构建时往往需要更多的内存占用，并且在遍历节点时也会更慢一些，所以建议减少深层的节点嵌套。

                                  有些  nvue 页面在Android底端机上渲染时，会看到从上到下的渲染过程，这往往都是因为组件过多导致的。

                                  每个组件渲染时都会触发一次通信，太多组件就会阻塞通信。


                          6、避免视图层和逻辑层频繁进行通讯

                                  ①、减少 scroll-view 组件的 scroll 事件监听，当监听scroll-view 的滚动事件时，视图层会频繁的想逻辑层发送数据；

                                  ②、监听 scroll-view 组件的滚动事件时，不要实时地改变  scroll-top/scroll-left 属性，因为监听滚动时，视图层向逻辑层通讯，

                                        改变scroll-top/scroll-left时，逻辑层又向视图层通讯，这样就可能造成通讯卡顿。

                                  ③、注意onPageScroll的使用，onPageScroll进行监听时，视图层会频繁的想逻辑层发送数据。

                                  ④、多使用css动画，而不是通过js的定时器操作界面做动画。

                                  ⑤、如果需要在canvas里做跟手操作，app端建议使用renderjs，小程序端建议使用web-view组件。。

                                          web-view 里的页面没有逻辑层和视图层分离的概念，自然也不会有通信折损。


                          7、优化页面切换动画

                                  ①、页面初始化时若存在大量图片或原生组件渲染和大量数据通讯，会发生新页面渲染和窗体进入动画抢资源，造成页面切换卡顿、掉帧。

                                     建议延时100~300ms渲染图片或复杂原生组件，分批进行数据融讯，以减少一次性渲染的节点数。

                                  ②、App 端动画效果可以自定义。

                                      popin/popout 的双窗体联动挤压动画效果对资源的消耗更大，如果动画期间页面里在执行耗时的 js，可能会造成动画掉帧。

                                      此时可以使用消耗资源更小的动画效果，比如 slide-in-right/slide-out-right。

                                  ③、App-nvue 和 H5，还支持页面预载，uni.preloadPage，可以提供更好的使用体验


                          8、优化背景色闪白

                                 <1>、如果是新页面进入时背景闪白

                                          ①、  如果页面背景是深色， 在 vue 页面中可能会发生新窗体刚开始动画时是灰白色背景，动画结束时才变为深色背景，造成闪屏。

                                                这是因为webview 的背景生效太慢的问题。

                                                此时需将样式写在 App.vue 里，可以加速页面样式渲染速度。

                                                App.vue 里面的样式是全局样式，每次新开页面会优先加载 App.vue 里面的样式，然后加载普通 vue 页面的样式。

                                          ②、app 端还可以在 pages.json 的页面的 style 里单独配置页面原生背景色，比如在 globalStyle->style->app-plus->background 下配置全局背景色

                                                eg：
                                                    "style": {
                                                          "app-plus": {
                                                              "background":"#000000"
                                                          }
                                                      }

                                          ③、另外 nvue 页面不存在此问题，也可以更改为 nvue 页面。

                                          ③、注意：以上优化方案在 HBuilderX 2.7.7 以上版本时运行在 iOS12 以下系统效果较差，请等待优化。






                                  <2>、如果是老页面消失时背景闪白 Android 上 popin 动画时，老窗体会有一个半透明消失的效果
                                  
                                              这个半透明效果的背景色，可以根据需要调节为暗色系

                                              在 pages.json 里 globalStyle 下或指定页面下，配置 app-plus 专属节点，然后配置 animationAlphaBGColor 属性。使用 nvue 代替 vue

                          9、优化启动速度

                                  <1>、  工程代码越多，包括背景图和本地字体文件越大，对小程序启动速度有影响，应注意控制体积。组件引用的前景图不影响性能。

                                  <2>、  App端的splash关闭有白屏检测机制，如果首页一直保平或首页本身就是一个空的中转页面，可能会造成 splsh 10秒后才关闭，

                                            可参考此文解决 https://ask.dcloud.net.cn/article/35565
                                    
                                  <3>、  APp端，首页为nvue时，并设置为 "fast 启动模式"，此时App启动速度最快。

                                  <4>、  App设置为纯 nvue项目 （mainifest 里设置 app-plus 下的  render:"native"）,这种项目的启动速度更快，2秒即可完成启动。因为它整个应用都使用了原生渲染，

                                            不加载基于 webview的那套框架。

                                  <5>、分包。  app也支持分包，分包可以让启动时只加载部分js。对于工程下js非常多的情况比较合适。


                          10、优化包体积

                                  <1>、uni-app 发行到小程序时，自带引擎只有十几k,主要是一个定制过的vue.js核心库。  

                                          如果使用了 es6 转 es5、css  对齐的功能，可能会增大代码体积，可以配置这些编译功能是否开启。

                                  <2>、uni-app 的 H5 端，自带了 vue.js、vue-router 及部分 es6 polyfill 库，这部分的体积 gzip 后只有 92k，和 web 开发使用 vue 基本一致。

                                          而内置组件 ui 库（如 picker、switch 等）、小程序的对齐 js api 等，相当于一个完善的大型 ui 库。

                                          但大多数应用不会用到所有内置组件和 API。

                                          由此 uni-app 提供了摇树优化机制，未摇树优化前的 uni-app 整体包体积约 500k，服务器部署 gzip 后 162k。开启摇树优化需在 manifest 配置

                                          详情： https://uniapp.dcloud.io/collocation/manifest?id=optimization

                                  <3>、App端支持如果选择纯 nvue项目(manifest 里设置 app-plus 下的 renderer:"native"),包体积可以进一步减少2M左右。

                                  <4>、uni-App的App-Android 端有  so 库的概念，支持不同的cpu类型越多、so库越多、包越大。

                                          在 HBuilderX 2.7 以前，Android app 默认包含 arm32 和 x86 两个 cpu 的支持 so 库。
                                          
                                          包体积比较大。
                                          
                                          如果你在意体积控制，可以在 manifest 里去掉 x86 cpu 的支持（manifest 可视化界面-App 其他设置里选择 cpu），这可以减少包体积到 9M。

                                          从 HBuilderX 2.7 起，默认不再包含 x86，如有需求请自行在 manifest 里勾选后打包。
                                          
                                          一般手机都是 arm 的，涉及 x86 cpu 场景很少，包括：个别少见的 Android pad、AS 的模拟器里选择 x86 类型。
           */
    </script>
  </body>
</html>